* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.section:nth-child(1) {
  overflow: hidden;
}
.section:nth-child(1) h1 {
  transform: translateX(-100%) skew(170deg);
}
.section:nth-child(1) h2 {
  transform: translateX(100%);
}
.section:nth-child(1) h3 {
  text-align: center;
  transform: translateY(1000px);
}
.section:nth-child(1).active1 h1 {
  transform: translate(20%) skew(0deg);
  transition: all 3s;
}
.section:nth-child(1).active1 h2 {
  animation: h2 2s 3s forwards ;
}
.section:nth-child(1).active1 h3 {
  transform: translateY(200px) rotate(720deg);
  transition: all 2s 3s;
}
@keyframes h2 {
  25% {
    transform: translate(10%) rotate(360deg);
  }
  50% {
    transform: translate(80%) rotate(-30deg);
  }
  75% {
    transform: translate(20%) rotate(30deg);
  }
  100% {
    transform: translate(60%) rotate(0);
  }
}
.box {
  position: fixed;
  top: 0;
  right: 0;
  width: 84px;
  height: 84px;
  z-index: 9999;
}
.box .music img {
  position: absolute;
  top: 0;
}
.box .music .playActive {
  animation: play 3s linear infinite;
}
@keyframes play {
  100% {
    transform: rotate(360deg);
  }
}
